import { useEffect, useState } from 'react'
import BaseCard from "coms/baseCard";
import BaseContent from "coms/baseContent";
import BaseCategory from "coms/baseCategory";
import { recommebdList, tagsList, articleList, categoryDeatail } from '@/api/article';
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import './index.less';
import { HeartOutlined, DeploymentUnitOutlined, EyeOutlined } from '@ant-design/icons';
import { useTranslation } from "react-i18next";
import BaseCarousel from '../../components/baseCarousel';//轮播
const ArticleView = () => {
  const [categorys, setcates] = useState([]);
  const [labels, setlabel] = useState("");
  const { params } = useParams();
  const navigate = useNavigate();
  const location = useLocation();
  const { state } = location;
  // console.log(state);
  useEffect(() => {
    if (state) {
      setlabel(state.label)
    }
  }, [labels])
  console.log(params);
  //动画
  useEffect(() => {
    // console.log([...document.querySelectorAll(".itemread")]);
    [...document.querySelectorAll(".itemread")].forEach((item, index) => {
      item.style.animation = `example1 ${(index + 1) * 0.1}s ease-out ${(index + 2) * 0.1}s backwards`;
    })
  }, [state])



  // 点击 推荐阅读 跳详情
  const toDetaiil = (ids) => {
    navigate(`/article/${ids}`)
  }
  const { t } = useTranslation();//切换语言触发的hooks

  useEffect(() => {
    !params ? articleList().then((res) => {
      console.log(res.data.data);
    }) : categoryDeatail(params).then((res) => {
      setcates(res.data.data[0]);
    });
  }, [params])
  console.log(categorys, '12121212');
  return (
    <div className="artbox">

      {
        params ? (
          <div className='pages'><h1>{state.label}<span>分类文章</span><br /><p>共搜索到<span>{categorys.length}</span>篇</p></h1></div>
        ) : <BaseCarousel />
      }
      <BaseCategory />
      {/* 左侧内容  传入调用的各自的接口*/}
      <BaseContent
        request={async () => {
          const { data: { data } } = params ? await categoryDeatail(params) : await articleList();
          return {
            data
          }
        }}
      >
        {
          (item, index) => {
            return <div key={index} className={"itemList"} onClick={() => {
              navigate(`/article/${item.id}`)
            }}>
              <h2>{item.title}
                {
                  params ? <span style={{ fontWeight: "normal", marginLeft: "5px", color: "#ccc", fontSize: "14px" }}>|{state.label}</span> : ""
                }
              </h2>
              <dl>
                <dt> <img src={item.cover} alt="" /></dt>
                <dd>
                  <span>{item.summary}</span>
                  <p>
                    <span><HeartOutlined />{item.likes}</span>
                    <span><EyeOutlined /> {item.views}</span>
                    <span><DeploymentUnitOutlined />分享</span>
                  </p>
                </dd>
              </dl>

            </div>
          }
        }

      </BaseContent>

      {/* 右侧导航 */}
      <div className='card'>
        {/*推荐阅读  */}
        <BaseCard title={t("推荐阅读")}

          request={async () => {
            const { data: { data } } = await recommebdList();
            return {
              data
            }
          }}
        >
          {
            (item, index) => {
              return <p className={'itemread'} key={index} onClick={() => toDetaiil(item.id)}>{item.title}</p>
            }
          }
        </BaseCard>
        {/*文章标签*/}
        <BaseCard title={t("文章标签")}
          className={"tags"}
          request={async () => {
            const { data: { data } } = await tagsList();
            return {
              data
            }
          }}
        >
          {
            (item, index) => {
              return <p key={index}>{item.label}</p>
            }
          }
        </BaseCard>
      </div>
    </div>
  )
}

export default ArticleView;
